<template>
  <div id="vuex">
    <span> <h5>日期:</h5></span>
    <span>年:{{ $store.state.count }}</span>
    <span>月:{{ $store.state.month }}</span>
    <span>日:{{ $store.state.day }}</span>
    <span><input type="button" value="修改" @click="changeCount" /></span>
  </div>
</template>

<script>
export default {
  name: "VueX",
  created() {
    console.log("$store", this.$store);
  },
  methods: {
    changeCount() {
      this.$store.state.count++;
    },
    // addAge(){
    //   console.log("this.$store.state.age前",this.$store.state.age);
    //   // 提交mutation，用commit；
    //   //  this.$store.commit(mutation的名字,载荷);
    //   this.$store.commit("mAddAge");
    //   console.log("this.$store.state.age后",this.$store.state.age);
    // }

    addAge() {
      // 派发action，用dispatch
      this.$store.dispatch("aAddAge");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#vuex {
  height: 3rem;
  font-size: 18px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
